<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>语音合成</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
        <script type="text/javascript" src="lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="js/xadmin.js" charset="utf-8"></script>
        <script type="text/javascript" src="js/common.define.js" charset="utf-8"></script>
        <script type="text/javascript" src="js/speech.define.js" charset="utf-8"></script>
        <script type="text/javascript" src="js/echarts.js" charset="utf-8"></script>
    </head>
    
    <body>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <form class="layui-form" id = "web_speech_api_form" lay-filter="web_speech_api_form" >
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"> API 相关参数 <span style='color:#f13939; font-weight: bold;'>（Microsoft Edge 浏览器语音包丰富）</span></div>
                            <div class="layui-card-body ">
                                <ul class="layui-row layui-col-space5 layui-this x-admin-carousel x-admin-backlog">
									<li class="layui-col-md1 layui-col-xs1"></li>
                                    <li class="layui-col-md10 layui-col-xs1">
                                        <table class="layui-table">
                                            <tbody>
                                            <tr>
                                                <th style="width: 20%"><span class="x-red">*</span> 语言类型(lang)</th>
                                                <td>
                                                    <select name="lang" lay-verify="" lay-search="">
                                                        <option value="">语言类别</option>
                                                        <option selected="selected" class="p-2" value="zh-Hans"> 简体中文</option>
                                                        <option value="zh-Hant" class="p-2"> 繁体中文</option>
                                                        <option value="en-US" class="p-2"> 美式英语</option>
                                                        <option value="en-GB" class="p-2"> 英式英语</option>
                                                        <option value="de-DE" class="p-2"> 德语</option>
                                                        <option value="fr-FR" class="p-2"> 法语</option>
                                                        <option value="ja-JP" class="p-2"> 日语</option>
                                                        <option value="ko-KR" class="p-2"> 韩语</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th><span class="x-red">*</span> 音调(pitch)</th>
                                                <td>
                                                    <!--<select name="pitch" lay-verify="" lay-search="">-->
                                                        <!--<option value="">音调</option>-->
                                                        <!--<option class="p-2" value="0.1"> 0.1</option>-->
                                                        <!--<option class="p-2" value="0.3"> 0.3</option>-->
                                                        <!--<option class="p-2" value="0.5"> 0.5</option>-->
                                                        <!--<option class="p-2" value="0.8"> 0.8</option>-->
                                                        <!--<option class="p-2" value="1" selected="selected" > 1</option>-->
                                                        <!--<option class="p-2" value="1.1"> 1.1</option>-->
                                                        <!--<option class="p-2" value="1.3"> 1.3</option>-->
                                                        <!--<option class="p-2" value="1.5"> 1.5</option>-->
                                                        <!--<option class="p-2" value="1.8"> 1.8</option>-->
                                                        <!--<option class="p-2" value="2"> 2</option>-->
                                                    <!--</select>-->
                                                    <input type="number" name="pitch" lay-affix="number" placeholder="设置 音调 为 1" value="1" step="0.1" min="0.1" max="2" class="layui-input">
                                                </td>
                                            </tr>
                                            <tr>
                                                <th><span class="x-red">*</span> 语速(rate)</th>
                                                <td>
                                                    <!--<select name="rate" lay-verify="" lay-search="">-->
                                                        <!--<option value="">语速</option>-->
                                                        <!--<option class="p-2" value="0.1"> 0.1</option>-->
                                                        <!--<option class="p-2" value="0.5"> 0.5</option>-->
                                                        <!--<option class="p-2" value="1" selected="selected" > 1</option>-->
                                                        <!--<option class="p-2" value="1.5"> 1.5</option>-->
                                                        <!--<option class="p-2" value="2"> 2</option>-->
                                                        <!--<option class="p-2" value="2.5"> 2.5</option>-->
                                                        <!--<option class="p-2" value="3"> 3</option>-->
                                                        <!--<option class="p-2" value="3.5"> 3.5</option>-->
                                                        <!--<option class="p-2" value="4"> 4</option>-->
                                                        <!--<option class="p-2" value="4.5"> 4.5</option>-->
                                                        <!--<option class="p-2" value="5"> 5</option>-->
                                                        <!--<option class="p-2" value="5.5"> 5.5</option>-->
                                                        <!--<option class="p-2" value="6"> 6</option>-->
                                                        <!--<option class="p-2" value="6.5"> 6.5</option>-->
                                                        <!--<option class="p-2" value="7"> 7</option>-->
                                                        <!--<option class="p-2" value="7.5"> 7.5</option>-->
                                                        <!--<option class="p-2" value="8"> 8</option>-->
                                                        <!--<option class="p-2" value="8.5"> 8.5</option>-->
                                                        <!--<option class="p-2" value="9"> 9</option>-->
                                                        <!--<option class="p-2" value="9.5"> 9.5</option>-->
                                                        <!--<option class="p-2" value="10"> 10</option>-->
                                                    <!--</select>-->
                                                    <input type="number" name="rate" lay-affix="number" placeholder="设置 语速 为 1" value="1" step="0.1" min="0.1" max="10" class="layui-input">
                                                </td>
                                            </tr>
                                            <tr>
                                                <th><span class="x-red">*</span> 音量(volume)</th>
                                                <td>
                                                    <!--<select name="volume" lay-verify="" lay-search="">-->
                                                        <!--<option value="">音调</option>-->
                                                        <!--<option class="p-2" value="0.1"> 0.1</option>-->
                                                        <!--<option class="p-2" value="0.3"> 0.3</option>-->
                                                        <!--<option class="p-2" value="0.5"> 0.5</option>-->
                                                        <!--<option class="p-2" value="0.8"> 0.8</option>-->
                                                        <!--<option class="p-2" value="1" selected="selected" > 1</option>-->
                                                    <!--</select>-->
                                                    <input type="number" name="volume" lay-affix="number" placeholder="设置 音调 为 1" value="1" step="0.1" min="0.1" max="1" class="layui-input">
                                                </td>
                                            </tr>
                                            <tr>
                                                <th><span class="x-red">*</span> 声音(voice)</th>
                                                <td>
                                                    <select id="voice" name="voice" lay-verify="" lay-search="">
                                                        <option value="">声音</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th id="chapter_name"><span class="x-red">*</span> 内容(text)</th>
                                                <td>
                                                    <textarea id="article_content" name="text" placeholder="闭关之所，李青云取出一张符纸，死亡气息迅速熏染，化为一张死命书。" class="layui-textarea" style="height: 400px;"></textarea>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </li>
                                    <li class="layui-col-md1 layui-col-xs1">
                                        <div style="margin: 5px 0">
                                            <div class="layui-form-item">
                                                <button type="button" id="voice_web_speech_api_form" class="layui-btn layui-btn-primary" lay-submit lay-filter="voice_web_speech_api_form"><i class="layui-icon layui-icon-voice"></i>声音</button>
                                            </div>
                                            <div class="layui-form-item">
                                                <button type="button" id="speech_web_speech_api_form" class="layui-btn" lay-submit lay-filter="speech_web_speech_api_form"><i class="layui-icon layui-icon-headset"></i>朗读</button>
                                            </div>
                                            <div class="layui-form-item">
                                                 <button type="button" id="pause_web_speech_api_form" class="layui-btn" lay-submit lay-filter="pause_web_speech_api_form"><i class="layui-icon layui-icon-pause"></i>暂停</button>
                                            </div>
                                            <div class="layui-form-item">
                                                 <button type="button" id="resume_web_speech_api_form" class="layui-btn" lay-submit lay-filter="resume_web_speech_api_form"><i class="layui-icon layui-icon-play"></i>继续</button>
                                            </div>
                                            <div class="layui-form-item">
                                                 <button type="button" id="cancel_web_speech_api_form" class="layui-btn" lay-submit lay-filter="cancel_web_speech_api_form"><i class="layui-icon layui-icon-close"></i>取消</button>
                                            </div>
                                            <div class="layui-form-item">
                                                 <button type = "reset" id="reset_web_speech_api_form" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-refresh-3"></i>重置</button>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <!--<div class="layui-card-body">-->
                                <!--<div class="layui-form-item">-->
                                <!--<div class="layui-inline layui-show-xs-block">-->
                                    <!--<button type="button" id="voice_web_speech_api_form" class="layui-btn layui-btn-primary" lay-submit lay-filter="voice_web_speech_api_form"><i class="layui-icon layui-icon-voice"></i>声音</button>-->
                                <!--</div>-->
                                <!--</div>-->
                                <!--<div class="layui-form-item">-->
                                <!--<div class="layui-inline layui-show-xs-block">-->
                                    <!--<button type="button" id="speak_web_speech_api_form" class="layui-btn" lay-submit lay-filter="speak_web_speech_api_form"><i class="layui-icon layui-icon-headset"></i>朗读</button>-->
                                <!--</div>-->
                                <!--</div>-->
                                <!--<div class="layui-form-item">-->
                                <!--<div class="layui-inline layui-show-xs-block">-->
                                    <!--<button type="button" id="pause_web_speech_api_form" class="layui-btn" lay-submit lay-filter="pause_web_speech_api_form"><i class="layui-icon layui-icon-pause"></i>暂停</button>-->
                                <!--</div>-->
                                <!--</div>-->
                                <!--<div class="layui-form-item">-->
                                <!--<div class="layui-inline layui-show-xs-block">-->
                                    <!--<button type="button" id="resume_web_speech_api_form" class="layui-btn" lay-submit lay-filter="resume_web_speech_api_form"><i class="layui-icon layui-icon-play"></i>继续</button>-->
                                <!--</div>-->
                                <!--</div>-->
                                <!--<div class="layui-form-item">-->
                                <!--<div class="layui-inline layui-show-xs-block">-->
                                    <!--<button type="button" id="cancel_web_speech_api_form" class="layui-btn" lay-submit lay-filter="cancel_web_speech_api_form"><i class="layui-icon layui-icon-close"></i>取消</button>-->
                                <!--</div>-->
                                <!--</div>-->
                                <!--<div class="layui-form-item">-->
                                <!--<div class="layui-inline layui-show-xs-block">-->
                                    <!--<button type = "reset" id="reset_web_speech_api_form" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-refresh-3"></i>重置</button>-->
                                <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <script type="text/javascript" src="js/tts/web.speech.api.manage.js" charset="utf-8"></script>

    </body>
</html>